<template>
	<view class="home">
		<custom-navbar :title="pageTitle" :show-back="true" @back="handleBack" />

		<view class="content" :style="{ paddingTop: navBarHeight + 'px' }">
			<view class="p0030" style="margin-top: 55rpx;">
				<!-- 状态标签 -->
				<view class="fc mb45">
					<image class="wh36" :src="statusIcon"></image>
					<view class="ml20 f36bc0" :class="feedbackDetail.status === 1 ? 'c398DFB' : 'FF0C10'">
						{{ statusText }}
					</view>
				</view>
				<view v-if="feedbackDetail.status === 1" class="reply-container mb20">
					<view class="reply-bg"></view>
					<view class="reply-content">
						<view class="f245c0">{{feedbackDetail.reply_content}}</view>
						<view class="mt20 f20c9">回复时间：{{formatDate(feedbackDetail.reply_time)}}</view>
					</view>
				</view>
				<!-- 反馈详情卡片 -->
				<view class="issue">
					<!-- 反馈分类 -->
					<view class="f26bc3">{{ feedbackDetail.feedback_classify_text }}</view>

					<!-- 提交时间 -->
					<view class="f245c9">提交时间：{{ formatDate(feedbackDetail.create_time) }}</view>

					<up-line margin='25rpx 0'></up-line>

					<!-- 反馈内容 -->
					<view class="mb50 f245c3">{{ feedbackDetail.feedback_content }}</view>

					<!-- 图片预览 -->
					<view class="image-preview" v-if="feedbackDetail.files && feedbackDetail.files.length > 0">
						<view class="image-row" v-for="(row, rowIndex) in chunkArray(feedbackDetail.files, 3)"
							:key="rowIndex">
							<image v-for="(file, index) in row" :key="index" :src="file" mode="aspectFill"
								class="preview-image" @click="previewImage(rowIndex * 3 + index)"></image>
						</view>
					</view>

					<!-- 回复内容（已回复时显示） -->
					<!-- 	<view v-if="feedbackDetail.status === 1" class="reply-section">
						<view class="f26bc3 mb15">回复内容</view>
						<view class="f245c9 mb15">回复时间：{{ formatDate(feedbackDetail.reply_time) }}</view>
						<view class="f245c3">{{ feedbackDetail.reply_content }}</view>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import CustomNavbar from '@/components/custom-navbar.vue'
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		myFeedbackDetali
	} from '@/api/user'

	// 系统信息
	const systemInfo = uni.getSystemInfoSync()
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)
	const pageTitle = ref('反馈详情')

	// 路由参数
	const feedback_id = ref('')

	// 反馈详情数据
	const feedbackDetail = ref({
		feedback_classify_text: '',
		feedback_id: '',
		feedback_classify: '',
		user_name: '',
		contact_number: '',
		feedback_content: '',
		create_time: '',
		status: 0,
		reply_content: null,
		reply_time: null,
		files: []
	})

	// 计算状态图标和文本
	const statusIcon = computed(() => {
		return feedbackDetail.value.status === 1 ?
			'/static/images/user/通过.svg' :
			'/static/images/user/待回复.svg'
	})

	const statusText = computed(() => {
		return feedbackDetail.value.status === 1 ? '已回复' : '待回复'
	})

	// 初始化加载
	onMounted(() => {
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		const options = currentPage.options
		feedback_id.value = options.feedback_id || options.id

		if (feedback_id.value) {
			loadFeedbackDetail()
		} else {
			uni.showToast({
				title: '缺少参数feedback_id',
				icon: 'none'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		}
	})

	// 加载反馈详情
	const loadFeedbackDetail = async () => {
		try {
			uni.showLoading({
				title: '加载中...'
			})

			const res = await myFeedbackDetali({
				feedback_id: feedback_id.value
			})

			if (res.code === 200) {
				feedbackDetail.value = res.data
				pageTitle.value = feedbackDetail.value.feedback_classify_text || '反馈详情'
			} else {
				throw new Error(res.message || '获取详情失败')
			}
		} catch (error) {
			console.error('加载反馈详情失败:', error)
			uni.showToast({
				title: error.message,
				icon: 'none'
			})
		} finally {
			uni.hideLoading()
		}
	}

	// 格式化日期
	const formatDate = (dateString) => {
		if (!dateString) return ''
		const date = new Date(dateString)
		return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
	}

	// 图片预览
	const previewImage = (index) => {
		uni.previewImage({
			current: index,
			urls: feedbackDetail.value.files
		})
	}

	// 返回
	const handleBack = () => {
		uni.navigateBack()
	}
	const chunkArray = (arr, size) => {
		return Array.from({
				length: Math.ceil(arr.length / size)
			}, (v, i) =>
			arr.slice(i * size, i * size + size)
		)
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		background-color: #f7f7f7;

		.content {
			padding-top: calc(var(--status-bar-height) + 70rpx);

			.reply-container {
				position: relative;
				margin-top: 20rpx;

				.reply-bg {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: #398DFB;
					border-radius: 0rpx 20rpx 20rpx 20rpx;
					opacity: 0.1;
				}

				.reply-content {
					position: relative;
					padding: 20rpx 30rpx;
					z-index: 1;
				}
			}

			.issue {
				padding: 38rpx 30rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 20rpx;

				.f26bc3 {
					font-size: 26rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 15rpx;
				}

				.f245c9 {
					font-size: 24rpx;
					color: #999;
				}

				.f245c3 {
					font-size: 24rpx;
					color: #333;
					line-height: 1.6;
				}

				.image-preview {
					margin-bottom: 30rpx;

					.image-row {
						display: flex;
						justify-content: space-between;
						margin-bottom: 20rpx;

						.preview-image {
							width: calc((100% - 40rpx) / 3);
							/* 减去两边的间距 */
							height: 200rpx;
							border-radius: 10rpx;
						}
					}
				}

				.reply-section {
					margin-top: 30rpx;
					padding-top: 30rpx;
					border-top: 1rpx solid #eee;
				}
			}

			.wh36 {
				width: 36rpx;
				height: 36rpx;
			}

			.ml20 {
				margin-left: 20rpx;
			}

			.mb45 {
				margin-bottom: 45rpx;
			}

			.mb50 {
				margin-bottom: 50rpx;
			}

			.mr20 {
				margin-right: 20rpx;
			}

			.mb15 {
				margin-bottom: 15rpx;
			}

			.f36bc0 {
				font-size: 36rpx;
				font-weight: bold;
			}

			.c398DFB {
				color: #398DFB;
			}

			.FF0C10 {
				color: #FF0C10;
			}
		}
	}
</style>